<template>
    <div class="app-container">
        <div class="row head">
            <div>表单名称</div>
            <div>状态</div>
            <div>操作</div>
        </div>
        <a-scrollbar style="height:calc(100vh - 240px);overflow: auto;">
            <div class="row" v-for="item in data" :key="item.slipType">
                <div>{{ list[item.slipType]?.name }}</div>
                <div>
                    <a-tag :color="item.isConfig ? '#D9EDFF' : '#DCDFE6'"
                        :style="{ color: item.isConfig ? '#007DFF' : '#606266' }">{{ item.isConfig ? '已配置' : '未配置'
                        }}</a-tag>
                </div>
                <div>
                    <a-button type="text" size="mini" @click="openModal(item)">配置科目</a-button>
                </div>
            </div>
        </a-scrollbar>
        <a-modal v-model:visible="visible" :width="560" hide-title @close="close" :on-before-ok="confirm"
            unmountOnClose>
            <CustomTitle title="配置单据" style="margin-bottom: 20px;" />
            <a-form-item label="记账科目" field="billSubjectStageReq">
                <a-scrollbar style="max-height:70vh;overflow: auto;padding-bottom: 2px;">
                    <div class="subject-box">
                        <template v-for="subject in confingSubjectList" :key="subject.key">
                            <div
                                v-if="subject.slipType.includes(configing.slipType)">
                                <div>{{ subject.title }}</div>
                                <div>
                                    <a-form :model="item" v-for="item, index in form[subject.key]" :ref="subject.key">
                                        <div class="list">
                                            <a-form-item field="debtorSubjectId"
                                                :rules="[{ required: true, message: '请选择', }]">
                                                <a-select style="width: 100%" v-model="item.debtorSubjectId"
                                                    placeholder="请选择" @popup-visible-change="formKey = ''"
                                                    show-header-on-empty>
                                                    <template #prefix>
                                                        <div class="prefix">借方</div>
                                                    </template>
                                                    <template #header>
                                                        <div class="search-box">
                                                            <a-input placeholder="请输入关键词" v-autoFocus v-model="formKey">
                                                                <template #suffix><icon-search /></template>
                                                            </a-input>
                                                        </div>
                                                    </template>
                                                    <a-option v-for="item in options" :value="item.subjectId"
                                                        :key="item.subjectId">
                                                        {{ item.subjectName }}
                                                    </a-option>
                                                </a-select>
                                            </a-form-item>
                                            <a-form-item field="creditorSubjectId"
                                                :rules="[{ required: true, message: '请选择' }]">
                                                <a-select style="width: 100%" v-model="item.creditorSubjectId"
                                                    placeholder="请选择" @popup-visible-change="formKey = ''"
                                                    show-header-on-empty>
                                                    <template #prefix>
                                                        <div class="prefix">贷方</div>
                                                    </template>
                                                    <template #header>
                                                        <div class="search-box">
                                                            <a-input placeholder="请输入关键词" v-autoFocus v-model="formKey">
                                                                <template #suffix><icon-search /></template>
                                                            </a-input>
                                                        </div>
                                                    </template>
                                                    <a-option v-for="item in options" :value="item.subjectId"
                                                        :key="item.subjectId">
                                                        {{ item.subjectName }}
                                                    </a-option>
                                                </a-select>
                                            </a-form-item>
                                            <img src="@/assets/images/del.png" alt=""
                                                @click="form[subject.key].splice(index, 1)">
                                        </div>
                                    </a-form>
                                    <div class="add"
                                        @click="form[subject.key].push({ creditorSubjectId: '', debtorSubjectId: '' } as approves)">
                                        <icon-plus-circle-fill />添加借方/贷方
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </a-scrollbar>
            </a-form-item>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import { getInvoicesList, getConfigSubjectList, configInvoices } from "@/apis/system";
import CustomTitle from "@/components/CustomTitle/index.vue";
import type { approves, InvoicesList } from "@/apis/system/type";
import Message from "@arco-design/web-vue/es/message";

const { proxy } = getCurrentInstance() as any;
const visible = ref(false);
const data = ref<InvoicesList[]>([]);
const form = ref<{ [key: string]: approves[] }>({
    businessGeneration: [],
    accountPayment: [],
    prepayment: [],
    incomeCost: [],
    refund:[],
    unRefund:[],
})
const confingSubjectList = [
    {
        key: 'businessGeneration',
        title: '业务发生',
        type: [1, 2],
        slipType: [1,2,3,4]
    }, {
        key: 'accountPayment',
        title: '账户支付',
        type: [1],
        slipType: [1,3,4]
    }, {
        key: 'prepayment',
        title: '预收款支付',
        type: [1],
        slipType: [1,4],
    }, {
        key: 'incomeCost',
        title: '确认收入成本',
        type: [1, 2],
        slipType: [1,2,3,4]
    },
    {
        key: 'paymentReceipt',
        title: '付款/收款',
        type: [2],
        slipType: [2]
    },
    {
        key:'refund',
        title:'退款金额处理',
        type:[8],
        slipType: [8]
    },
    {
        key:'unRefund',
        title:'不退款金额处理',
        slipType:[8]
    }
]
const formKey = ref('')
const options = computed(() => {
    if (formKey.value) {
        return subjectList.value.filter(item => item.subjectName.indexOf(formKey.value) != -1)
    } else {
        return subjectList.value
    }
});
const configing = ref({
    type: 0,
    slipType: 0,
});
const subjectList = ref<any[]>([]);
const getSubjectTree = async () => {
    const res = await getConfigSubjectList();
    subjectList.value = res.data;
};
const init = async () => {
    const res = await getInvoicesList();
    data.value = res.data;
}
const list: { [key: string]: { [key: string]: string | number } } = {
    orderPaySlip: { name: '订单收款单', key: 1 },
    purchasePaySlip: { name: '采购付款单', key: 2 },
    advanceReceiptSlip: { name: '预收款单', key: 3 },
    otherReceiptSlip: { name: '其他收款单', key: 4 },
    purposeRefundSlip: { name: '退款付款单-意向金', key: 8 }
}
const openModal = (item: InvoicesList) => {
    configing.value.type = item.type;
    configing.value.slipType = list[item.slipType].key as number;
    form.value = item.billSubjectStageReq;
    visible.value = true;
}
const close = () => {
    visible.value = false;
}
const verify = async () => {
    let arr: Promise<boolean>[] = [];
    confingSubjectList.forEach(v => {
        if (form.value[v.key].length) {
            proxy.$refs[v.key].forEach((item: any) => {
                arr.push(new Promise<boolean>((resolve) => {
                    item.validate((valid: any) => {
                        resolve(valid == undefined)
                    })
                }))
            })
        }
    })
    const result = await Promise.all(arr);
    return result.every(v => v);
}
const confirm = async () => {
    if (await verify()) {
        await configInvoices(configing.value.slipType, form.value);
        Message.success('配置成功')
        init();
    }
    return await verify();
}
onMounted(async () => {
    init();
    getSubjectTree()
})
</script>

<style lang="scss" scoped>
$border: 1px solid #D7D8E0;

.row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: $border;
    border-top: none;
    height: 50px;

    >div {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    >div:first-child {
        justify-content: start;
        padding-left: 20px;
    }

    &:nth-child(even) {
        background: #F2F6FC;
    }
}

.head {
    background: #F2F6FC;
    border-top: $border;
}

.subject-box {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 10px;

    >div {
        border: $border;


        >div:nth-child(1) {
            height: 32px;
            background: #F5F7FA;
            line-height: 32px;
            padding-left: 16px;
            border-bottom: $border;
        }

        .add {
            color: #007DFF;
            line-height: 40px;
            user-select: none;
            width: 120px;
            display: flex;
            gap: 8px;
            align-items: center;
        }

        >div:last-child {
            .list {
                min-height: 46px;
                display: flex;
                gap: 10px;
                padding: 10px 16px 0;
                box-sizing: border-box;
                align-items: center;
                max-width: 440px;

                :deep(.arco-form-item-label-col) {
                    display: none;
                }

                :deep(.arco-form-item-wrapper-col) {
                    flex: 1;
                }

                :deep(.arco-row-justify-start) {
                    margin-bottom: 0;
                }

                :deep(.arco-form-item) {
                    width: 46%;
                }

                img {
                    width: 16px;
                    height: 16px;
                }

                ::v-deep(.arco-select_wrapper) {
                    height: 32px;
                }
            }

            >div {
                height: 40px;
                padding: 0 16px;
            }

            .prefix {
                border-right: $border;
                height: 100%;
                line-height: 32px;
                padding-right: 10px;
            }
        }
    }
}

.search-box {
    :deep(.arco-input-wrapper) {
        border: none;
        border-radius: 0;
    }
}

.arco-scrollbar {
    flex: 1;
}
</style>
